{% extends 'scm/base.html' %}

{% block content %}

<style>

.petrogl-form-container {
    background-color: #dee2e6 !important;
    border: none !important;
    box-shadow: none !important;
}

.petrogl-form-container .card-body {
    padding: 20px;
}

.petrogl-form-container .form-control,
.petrogl-form-container .form-select,
.petrogl-form-container textarea {
    background-color: #fff;
    border: none !important;
    box-shadow: none !important;
}

.petrogl-form-container .form-control:focus,
.petrogl-form-container .form-select:focus,
.petrogl-form-container textarea:focus {
    box-shadow: 0 0 0 2px rgba(86,99,111,.12) !important;
}

#itemsTable {
    width: 100%;
    min-width: 1150px;
    background-color: #fff;
    border: none !important;
    border-collapse: collapse !important;
}

#itemsTable th,
#itemsTable td {
    border-top: none !important;
    border-right: none !important;
    border-bottom: 1px solid #eef0f2 !important;
    border-left: 1px solid #eef0f2 !important;
    vertical-align: middle;
}

#itemsTable th:first-child,
#itemsTable td:first-child {
    border-left: none !important;
}

#itemsTable thead,
#itemsTable thead th {
    background-color: #56636f !important;
    color: #fff !important;
    font-weight: 600;
    border: none !important;
}

#itemsTable tbody tr:last-child td {
    border-bottom: none !important;
}

#itemsTable tbody tr:hover {
    background-color: #f8f9fa;
}

#itemsTable .form-control,
#itemsTable .form-select {
    background-color: #fff;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
}

#itemsTable th:nth-child(6),
#itemsTable td:nth-child(6) {
    min-width: 105px;
    width: 105px;
}

#itemsTable th:nth-child(7),
#itemsTable td:nth-child(7) {
    min-width: 110px;
    width: 110px;
}

#itemsTable th:nth-child(6),
#itemsTable th:nth-child(7) {
    white-space: normal;
    line-height: 1.15;
}

#itemsTable td:nth-child(6),
#itemsTable td:nth-child(7) {
    white-space: nowrap;
}

#itemsTable td:nth-child(6) input,
#itemsTable td:nth-child(7) input {
    text-align: right;
    padding-left: 4px;
    padding-right: 4px;
}

</style>


<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">

        <h3>
            Create Purchase Request
        </h3>

        <a href="{% url 'pr' %}"
           class="btn btn-secondary">

            <i class="bi bi-arrow-left"></i>
            Back

        </a>

    </div>


    <div class="card petrogl-form-container">

        <div class="card-body">

            <form method="POST">

                {% csrf_token %}


                <div class="row g-3">


                    <!-- PR NO -->

                    <div class="col-md-4">

                        <label class="form-label">
                            PR No
                        </label>

                        <input
                            type="text"
                            name="pr_no"
                            class="form-control"
                            value="{{ next_pr_no }}"
                            readonly
                            required
                        >

                    </div>


                    <!-- PR DATE -->

                    <div class="col-md-4">

                        <label class="form-label">
                            PR Date
                        </label>

                        <input
                            type="date"
                            name="pr_date"
                            class="form-control"
                            value="{{ today|date:'Y-m-d' }}"
                            required
                        >

                    </div>


                    <!-- PR TITLE -->

                    <div class="col-md-4">

                        <label class="form-label">
                            PR Title
                        </label>

                        <input
                            type="text"
                            name="pr_title"
                            class="form-control"
                            value="{{ request.POST.pr_title }}"
                            required
                        >

                    </div>


                    <!-- REQUESTER -->

                    <div class="col-md-4">

                        <label class="form-label">
                            Requester
                        </label>

                        <input
                            type="text"
                            name="requester"
                            class="form-control"
                            value="{{ current_user.full_name }}"
                            readonly
                        >

                    </div>


                    <!-- DEPARTMENT -->

                    <div class="col-md-4">

                        <label class="form-label">
                            Department
                        </label>

                        <input
                            type="text"
                            name="department"
                            class="form-control"
                            value="{{ current_user.department }}"
                            readonly
                            required
                        >

                    </div>


                    <!-- COST CENTER -->

                    <div class="col-md-4">

                        <label class="form-label">
                            Cost Center
                        </label>

                        <select
                            name="cost_center"
                            class="form-select"
                            required
                        >

                            <option value="">
                                Select Cost Center
                            </option>

                            {% for item in cc_items %}

                            <option
                                value="{{ item.cc_no }}"
                                {% if request.POST.cost_center == item.cc_no %}
                                    selected
                                {% endif %}
                            >

                                {{ item.cc_no }}
                                {% if item.cc_name %}
                                    - {{ item.cc_name }}
                                {% endif %}

                            </option>

                            {% endfor %}

                        </select>

                    </div>


                    <!-- SOURCE OF FUND -->

                    <div class="col-md-4">

                        <label class="form-label">
                            Source of Fund
                        </label>

                        <select
                            name="source_of_fund"
                            class="form-select"
                            required
                        >

                            <option value="WP&B" selected>
                                WP&B
                            </option>

                            <option value="AFE">
                                AFE
                            </option>

                        </select>

                    </div>


                    <!-- REQUIRED DATE -->

                    <div class="col-md-4">

                        <label class="form-label">
                            Required Date
                        </label>

                        <input
                            type="date"
                            name="required_date"
                            class="form-control"
                            value="{{ today|date:'Y-m-d' }}"
                            required
                        >

                    </div>


                    <!-- PRIORITY -->

                    <div class="col-md-4">

                        <label class="form-label">
                            Priority
                        </label>

                        <select
                            name="priority"
                            class="form-select"
                        >

                            <option value="Normal" selected>
                                Normal
                            </option>

                            <option value="Urgent">
                                Urgent
                            </option>

                        </select>

                    </div>


                    <!-- PURPOSE -->

                    <div class="col-12">

                        <label class="form-label">
                            Purpose
                        </label>

                        <textarea
                            name="purpose"
                            class="form-control"
                            rows="3"
                        >{{ request.POST.purpose }}</textarea>

                    </div>


                    <!-- REMARKS -->

                    <div class="col-12">

                        <label class="form-label">
                            Remarks
                        </label>

                        <textarea
                            name="remarks"
                            class="form-control"
                            rows="3"
                        >{{ request.POST.remarks }}</textarea>

                    </div>


                </div>


                <!-- PR ITEMS -->

                <div class="mt-4">

                    <div class="d-flex justify-content-between align-items-center mb-2">

                        <h5 class="mb-0">
                            PR Items
                        </h5>

                        <button
                            type="button"
                            class="btn btn-secondary btn-sm"
                            onclick="addItem()"
                        >

                            <i class="bi bi-plus-lg"></i>
                            Add Item

                        </button>

                    </div>


                    <!-- KIMAP OPTIONS -->

                    <select
                        id="kimapOptionsTemplate"
                        style="display:none;"
                    >

                        <option value="">
                            Select KIMAP
                        </option>

                        {% for item in kimap_items %}

                        <option
                            value="{{ item.id }}"
                            data-kimap="{{ item.kimap|escape }}"
                            data-name="{{ item.name|escape }}"
                            data-acct-no="{{ item.acct_no|escape }}"
                            data-uom="{{ item.uom|escape }}"
                            data-priceusd="{{ item.priceusd }}"
                        >

                            {{ item.kimap }} - {{ item.name }}

                            {% if item.location %}
                                ({{ item.location }})
                            {% endif %}

                        </option>

                        {% endfor %}

                    </select>


                    <div class="table-responsive">

                        <table
                            class="table align-middle"
                            id="itemsTable"
                        >

                            <thead>

                                <tr>

                                    <th>KIMAP</th>

                                    <th>Description</th>

                                    <th>Account No</th>

                                    <th>Qty</th>

                                    <th>UOM</th>

                                    <th>Est. Unit Price</th>

                                    <th>Est. Amount</th>

                                    <th>Available Budget</th>
                                    <th>Budget Status</th>
                                    <th>Required Date</th>

                                    <th>Location</th>

                                    <th>Remarks</th>

                                    <th></th>

                                </tr>

                            </thead>

                            <tbody id="itemsBody">
                            </tbody>

                        </table>

                    </div>

                </div>


                <input
                    type="hidden"
                    name="item_count"
                    id="item_count"
                    value="0"
                >


                <div class="mt-3">

                    <button
                        type="submit"
                        class="btn btn-secondary"
                    >

                        <i class="bi bi-check-lg"></i>
                        Save PR

                    </button>

                    <a
                        href="{% url 'pr' %}"
                        class="btn btn-secondary"
                    >

                        <i class="bi bi-x-lg"></i>
                        Cancel

                    </a>

                </div>


            </form>

        </div>

    </div>

</div>


<script>

let itemCount = 0;


function addItem() {

    const tbody =
        document.getElementById("itemsBody");

    const template =
        document.getElementById(
            "kimapOptionsTemplate"
        );

    const row =
        document.createElement("tr");

    const index = itemCount;

    row.id = `item_row_${index}`;

    const options =
        template.innerHTML;

    row.innerHTML = `

        <td>

            <select
                name="kimap_id_${index}"
                class="form-select form-select-sm"
                onchange="loadKimap(${index})"
                required
            >

                ${options}

            </select>

        </td>


        <td>

            <input
                type="text"
                id="description_${index}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="text"
                id="acct_no_${index}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="number"
                name="quantity_${index}"
                id="quantity_${index}"
                class="form-control form-control-sm"
                min="0"
                step="0.0001"
                value="1"
                oninput="calculateAmount(${index})"
                required
            >

        </td>


        <td>

            <input
                type="text"
                id="uom_${index}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="text"
                name="estimated_unit_price_${index}"
                id="estimated_unit_price_${index}"
                class="form-control form-control-sm price-input"
                inputmode="decimal"
                oninput="calculateAmount(${index})"
                onfocus="unformatPrice(this)"
                onblur="formatPrice(this, ${index})"
            >

        </td>


        <td>

            <input
                type="text"
                id="estimated_amount_${index}"
                class="form-control form-control-sm"
                value="0.00"
                readonly
                tabindex="-1"
            >

        </td>

        <td>
            <input
                type="text"
                id="available_budget_${index}"
                class="form-control form-control-sm"
                value="-"
                readonly
                tabindex="-1"
            >
        </td>

        <td>
            <input
                type="text"
                id="budget_status_${index}"
                class="form-control form-control-sm"
                value="-"
                readonly
                tabindex="-1"
            >
        </td>

        <td>

            <input
                type="date"
                name="required_date_${index}"
                class="form-control form-control-sm"
                value="{{ today|date:'Y-m-d' }}"
            >

        </td>


        <td>

            <input
                type="text"
                name="location_${index}"
                class="form-control form-control-sm"
            >

        </td>


        <td>

            <input
                type="text"
                name="item_remarks_${index}"
                class="form-control form-control-sm"
            >

        </td>


        <td class="text-center">

            <button
                type="button"
                class="btn btn-danger btn-sm"
                onclick="removeItem(${index})"
            >

                <i class="bi bi-trash"></i>

            </button>

        </td>

    `;

    tbody.appendChild(row);

    itemCount++;

    document.getElementById(
        "item_count"
    ).value = itemCount;

}


function loadKimap(index) {

    const select =
        document.querySelector(
            `select[name="kimap_id_${index}"]`
        );

    if (!select) return;

    const option =
        select.options[
            select.selectedIndex
        ];

    if (!option || !option.value) {

        document.getElementById(
            `description_${index}`
        ).value = "";

        document.getElementById(
            `acct_no_${index}`
        ).value = "";

        document.getElementById(
            `uom_${index}`
        ).value = "";

        document.getElementById(
            `estimated_unit_price_${index}`
        ).value = "";

        document.getElementById(
            `estimated_amount_${index}`
        ).value = "";

        return;
    }

    const price =
        parseFloat(
            option.dataset.priceusd || "0"
        );

    document.getElementById(
        `description_${index}`
    ).value =
        option.dataset.name || "";

    document.getElementById(
        `acct_no_${index}`
    ).value =
        option.dataset.acctNo || "";

    document.getElementById(
        `uom_${index}`
    ).value =
        option.dataset.uom || "";

    document.getElementById(
        `estimated_unit_price_${index}`
    ).value =
        price > 0 ? price.toFixed(2) : "";

    calculateAmount(index);
    checkBudget(index);
}


function calculateAmount(index) {

    const priceInput = document.getElementById(
        `estimated_unit_price_${index}`
    );

    const price = parseFloat(
        (priceInput.value || "0").replace(/,/g, "")
    ) || 0;

    const qty = parseFloat(
        document.getElementById(
            `quantity_${index}`
        ).value || "0"
    ) || 0;

    const amount = price * qty;

    document.getElementById(
        `estimated_amount_${index}`
    ).value = amount.toLocaleString(
        "en-US",
        {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }
    );

    checkBudget(index);
}

function formatPrice(input, index) {

    const value = parseFloat(
        (input.value || "0").replace(/,/g, "")
    );

    if (isNaN(value)) {
        input.value = "";
        calculateAmount(index);
        return;
    }

    input.value = value.toLocaleString(
        "en-US",
        {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }
    );

    calculateAmount(index);
}


function unformatPrice(input) {

    input.value = (input.value || "")
        .replace(/,/g, "");
}

function checkBudget(index) {
    const acctNo = document.getElementById(
        `acct_no_${index}`
    ).value;

    const requiredDate = document.querySelector(
        `input[name="required_date_${index}"]`
    )?.value;

    const amountInput = document.getElementById(
        `estimated_amount_${index}`
    );

    const availableInput = document.getElementById(
        `available_budget_${index}`
    );

    const statusInput = document.getElementById(
        `budget_status_${index}`
    );

    const amount = parseFloat(
        (amountInput?.value || "0").replace(/,/g, "")
    ) || 0;

    if (!acctNo || !requiredDate) {
        availableInput.value = "-";
        statusInput.value = "-";

        statusInput.classList.remove(
            "text-danger",
            "text-success"
        );

        return;
    }

    fetch(
        `{% url 'check_pr_budget' %}` +
        `?acct_no=${encodeURIComponent(acctNo)}` +
        `&required_date=${encodeURIComponent(requiredDate)}` +
        `&amount=${amount}`
    )
    .then(response => response.json())
    .then(data => {

        if (!data.success) {
            availableInput.value = "-";
            statusInput.value = "-";

            statusInput.classList.remove(
                "text-danger",
                "text-success"
            );

            return;
        }

        const availableBudget =
            Number(data.available_budget || 0);

        availableInput.value =
            availableBudget.toLocaleString(
                "en-US",
                {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }
            );

        const status =
            data.budget_status || "NO BUDGET";

        statusInput.value = status;

        statusInput.classList.remove(
            "text-danger",
            "text-success"
        );

        if (status === "AVAILABLE") {

            statusInput.classList.add(
                "text-success"
            );

        } else if (
            status === "EXCEED" ||
            status === "NO BUDGET"
        ) {

            statusInput.classList.add(
                "text-danger"
            );
        }
    })
    .catch(() => {

        availableInput.value = "-";
        statusInput.value = "-";

        statusInput.classList.remove(
            "text-danger",
            "text-success"
        );
    });
}

function removeItem(index) {

    const row =
        document.getElementById(
            `item_row_${index}`
        );

    if (row) {
        row.remove();
    }

}


</script>

{% endblock %}